<template>
  <div id="traffic_echart"></div>
</template>
<script>
export default {
  data() {
    return {
      trafficData: {},
    };
  },
  methods: {
    initChart() {
      fetch(`./testData/trafficdata.json`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          let { hours, days, trafficData } = data;

          const title = [];
          const singleAxis = [];
          const series = [];
          days.forEach(function (day, idx) {
            title.push({
              textBaseline: "middle",
              top: ((idx + 0.5) * 100) / 7 + "%",
              text: day,
              textStyle: {
                fontSize: 10, // 调整较小的字体大小
                color: '#fff'
              },
            });
            singleAxis.push({
              left: 70,
              type: "category",
              boundaryGap: false,
              data: hours,
              top: (idx * 100) / 7 + 6 + "%",
              height: 100 / 7 - 5 + "%",
              axisLabel: {
                color: "#fff",
                interval: 2,
                fontSize: 8, // 调整较小的字体大小
              },
            });
            series.push({
              singleAxisIndex: idx,
              coordinateSystem: "singleAxis",
              type: "scatter",
              data: [],
              symbolSize: function (dataItem) {
                return dataItem[1];
              },
            });
          });
          trafficData.forEach(function (dataItem) {
            series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
          });
          let option = {
            tooltip: {
              position: "top",
            },
            title: title,
            singleAxis: singleAxis,
            series: series
          };

          let myChart = echarts.init(document.getElementById("traffic_echart"));
          myChart.setOption(option, true);

          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
#traffic_echart {
  height: 100%;
  width: 100%;
}
.chart-container {
  height: calc(50% - 25px);
  width: calc(50% - 25px);
  position: relative;
}

.legend-container {
  padding-top: 3px;
  display: flex;
  justify-content: space-around;
  color: #fff;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.legend-label {
  font-size: 12px;
}
</style>
